<template>
  <q-dialog v-model="isFlagShow">
    <q-card  style="min-width: 300px">
      <q-card-section class="row">
        <div class="text-subtitle1">系统提示</div>
        <q-space />
        <q-btn flat round dense icon="mdi-close" size="sm" @click="close" />
      </q-card-section>
      <q-card-section class="row">
        <div>
          <q-icon name="mdi-alert-circle-outline" color="primary" size="md"></q-icon>
          <span>确定要删除 “{{dlgTitle}}” 么！</span>
        </div>
      </q-card-section>
      <q-separator/>
      <q-card-actions align="center">
        <q-btn dense label="确认" color="primary" @click="submit"></q-btn>
        <q-btn dense label="取消" color="primary" @click="close" ></q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent, toRefs, ref } from 'vue';

export default defineComponent({
  name: 'AmyDeleteDlg',
  props: {
    selectedIndex: Number
  },
  setup (props, context) {
    let {
      selectedIndex
    } = toRefs(props);

    //显示控制变量
    let isFlagShow = ref(false);

    //窗口标题
    let dlgTitle = ref('');

    //确定删除
    const submit = () => {
      isFlagShow.value = false;
      context.emit('btn-submit', selectedIndex.value);
    }

    //关闭
    const close = () => {
      isFlagShow.value = false;
    }

    //显示
    const show = (text: string) => {
      isFlagShow.value = true;
      dlgTitle.value = text;
    };

    return {
      isFlagShow,
      dlgTitle,
      submit,
      close,
      show
    };
  }
})
</script>

<style scoped>

</style>
